<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <script src="../zepto.min.js"></script>

</head>

<body ontouchstart>
<div class="bd spacing">
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">Toast 成功</a>
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-cancel">Toast 取消</a>
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="show-toast-3">Toast 警告</a>
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoading">Toast Loading </a>

  <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd1">Dialog alert</a>
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd2">Dialog confirm</a>
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd3">Dialog prompt</a>
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd4">Dialog 自定义</a>
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="sd5">topTips</a>
</div>

<!----------------------------------------------进度条----------------------------------->
<div class="bd spacing">
  <div class="weui_progress">
    <div class="weui_progress_bar">
      <div class="weui_progress_inner_bar js_progress" style="width: 0%;"></div>
    </div>
    <a href="javascript:;" class="weui_progress_opr">
      <i class="weui_icon_cancel"></i>
    </a>
  </div>
  <br>
  <div class="weui_progress">
    <div class="weui_progress_bar">
      <div class="weui_progress_inner_bar js_progress" style="width: 50%;"></div>
    </div>
    <a href="javascript:;" class="weui_progress_opr">
      <i class="weui_icon_cancel"></i>
    </a>
  </div>
  <br>
  <div class="weui_progress">
    <div class="weui_progress_bar">
      <div class="weui_progress_inner_bar js_progress" style="width: 80%;"></div>
    </div>
    <a href="javascript:;" class="weui_progress_opr">
      <i class="weui_icon_cancel"></i>
    </a>
  </div>
  <div class="weui_btn_area">
    <a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上传</a>
  </div>
</div>

<!------------------------------------------------->
<div class="bd spacing">
  <a href="javascript:;" class="weui_btn weui_btn_primary" id="sa">点击上拉ActionSheet</a>
</div>
<!--BEGIN actionSheet-->
<div id="actionSheet_wrap">
  <div class="weui_mask_transition" id="mask"></div>
  <div class="weui_actionsheet" id="weui_actionsheet">
    <div class="weui_actionsheet_menu">
      <div class="weui_actionsheet_cell">中国</div>
      <div class="weui_actionsheet_cell">美国</div>
      <div class="weui_actionsheet_cell">日本</div>
      <div class="weui_actionsheet_cell">韩国</div>
    </div>
    <div class="weui_actionsheet_action">
      <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
    </div>
  </div>
</div>
<!--END actionSheet-->

<script src="../example.js"></script>
<script>


  $(document).on("click", "#showToast", function () {
    $.toast("操作成功");
  });

  $(document).on("click", "#show-toast-cancel", function () {
    $.toast("取消操作", "cancel");
  });
  $(document).on("click", "#show-toast-3", function () {
    $.toast("禁止操作", "forbidden");
  });
  $(document).on("click", "#showLoading", function () {
    $.showLoading();

    setTimeout(function () {
      $.hideLoading();
    }, 3000)
  });

  $(document).on("click", "#sd1", function () {
    $.alert("弹出对话框就是好", "标题");
  });
  $(document).on("click", "#sd2", function () {
    $.confirm("您确定要删除吗?", "确认删除?", function () {
      $.toast("删除成功!");
    }, function () {
      //取消操作
    });
  });
  $(document).on("click", "#sd3", function () {
    $.prompt("输入昵称看看", "你的昵称", function (text) {
      $.alert("您的昵称是:" + text, "哦");
    }, function () {
      //取消操作
    });
  });
  $(document).on("tap", "#sd4", function () {
    $.modal({
      title: "支付方式",
      text: "选择你的支付方式",
      buttons: [
        {
          text: "支付宝", onClick: function () {
          $.alert("你选择了支付宝");
        }
        },
        {
          text: "微信支付", onClick: function () {
          $.alert("你选择了微信支付");
        }
        },
        {text: "取消", className: "default"},
      ]
    });
  });

  //进度条
  $(function () {
    $("#btnStartProgress").click(function () {
      if ($(this).hasClass('weui_btn_disabled')) {
        return;
      }

      $(this).addClass('weui_btn_disabled');

      var progress = 0;
      var $progress = $('.js_progress');

      function next() {
        $progress.css({width: progress + '%'});
        progress = ++progress % 100;
        setTimeout(next, 30);
      }

      next();
    });

  })

  //操作表
  $("#sa").click(function () {
    var mask = $('#mask');
    var weuiActionsheet = $('#weui_actionsheet');
    weuiActionsheet.addClass('weui_actionsheet_toggle');
    mask.show().addClass('weui_fade_toggle').one('click', function () {
      hideActionSheet(weuiActionsheet, mask);
    });
    $('#actionsheet_cancel').one('click', function () {
      hideActionSheet(weuiActionsheet, mask);
    });
    weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

    function hideActionSheet(weuiActionsheet, mask) {
      weuiActionsheet.removeClass('weui_actionsheet_toggle');
      mask.removeClass('weui_fade_toggle');
      weuiActionsheet.on('transitionend', function () {
        mask.hide();
      }).on('webkitTransitionEnd', function () {
        mask.hide();
      })
    }
  });


</script>

</body>
</html>
